<template>
  <el-dialog
      v-model="ledgerListWinDialogVisible"
      title="设备选择"
      width="85%"
      @close="handleClose"
      draggable
      center
  >
    <template #default>
      <el-row style="margin-top: 10px">
        <!-- 分类搜索栏 -->
        <el-col :span="3" style="margin-right: 50px">
          <el-form>
            <el-form-item>
              <el-input placeholder="请输入分类名称"/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="20">
          <el-row>
            <el-form :model="ledgerQuery" inline>
              <el-form-item label="设备编码">
                <el-input v-model="ledgerQuery.ledgerEncode" placeholder="请输入设备编码"/>
              </el-form-item>
              <el-form-item label="设备名称">
                <el-input v-model="ledgerQuery.ledgerName" placeholder="请输入设备名称"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loadLedgers">搜索</el-button>
                <el-button @click="reloadLedgers">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <!-- 数据表 -->
          <el-row>
            <el-col :span="24" style="margin-top: 10px">
              <el-table
                  :data="ledgers"
                  stripe
                  ref="ledgerTable"
              ><!-- stripe可以为表格添加斑马纹样式，默认false -->
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="ledgerEncode" label="设备编码" width="100" align="center"/>
                <el-table-column prop="ledgerName" label="设备名称" width="100" align="center"/>
                <el-table-column prop="ledgerBrand" label="品牌" width="100" align="center"/>
                <el-table-column prop="ledgerModel" label="规格型号" width="150" align="center"/>
                <el-table-column prop="ledgerWorkshop" label="所属车间" width="150" align="center">
                  <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.ledgerWorkshop == 0">家用车间</el-tag>
                    <el-tag type="success" v-else-if="scope.row.ledgerWorkshop == 1">军用车间</el-tag>
                    <el-tag type="info" v-else>企业车间</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="ledgerStatus" label="设备状态" width="100" align="center">
                  <template #default="scope">
                    <el-tag type="primary" v-if="scope.row.ledgerStatus == 1">开机</el-tag>
                    <el-tag type="danger" v-else>停机</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200" align="center"/>
              </el-table>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addLedgerSubmit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, watch} from "vue";
import ledgerRequest from "@/api/ledger.js";

const props = defineProps(['flag']);
const emits = defineEmits(['cancelAdd','addComplete'])
let ledgerListWinDialogVisible = ref(false);
// 封装查询条件
let ledgerQuery = ref({ledgerScms : 2});
// 封装查询的结果集合
let ledgers = ref([]);
let ledgerTable = ref(null);

function handleClose(){
  emits("cancelAdd");
}
function cancel(){
  emits("cancelAdd");
}
function loadLedgers(){
  ledgerRequest.loadLedgers(ledgerQuery.value,res=>{
    ledgers.value = res.data;
  })
}

function reloadLedgers(){
  ledgerQuery.value.ledgerEncode = null;
  ledgerQuery.value.ledgerName = null;
  ledgerRequest.loadLedgers(ledgerQuery.value,res=>{
    ledgers.value = res.data;
  })
}

function addLedgerSubmit() {
  let selectedRows = ledgerTable.value.getSelectionRows();
  ledgerRequest.updateScms(selectedRows[0].value, res => {
    emits("addComplete");
    ledgerListWinDialogVisible.value = false;
  })
}

// 属性侦听
watch(() => props.flag, () => {
  ledgerListWinDialogVisible.value = props.flag === 1;
  loadLedgers();
});
</script>
<style scoped>

</style>